<template>
    <div :style="{ width: width, height: height }">
        <div v-show="flag" @mouseenter="stop()" @mouseleave="start()" class="" ref="echarts" :style="{ height: height }"
            style="overflow: hidden"></div>
        <div v-show="!flag" class="no-data-echarts">
            {{ message }}
        </div>
    </div>
</template>
<script>
import mixincomon from '../../mixins/mixincomon';
import {
    mapState
} from "vuex";
//安装jquery 兼容老的插件
import $ from 'jquery';
import lineStyle from "echarts/src/model/mixin/lineStyle";
export default {
    name: "chart",
    mixins: [mixincomon],
    // computed: mapState({
    //     list:state=>state.commonHeader.list,
    // }),
    data() {
        return {
            flag: true,
            options: {
                textStyle: {
                    color: '#6F7D8C'
                },
                color: ['#0393FF', "#ffea37"],
                title: {
                    show: false,
                    text: '堆叠区域图'
                },
                legend: {
                    show: false,
                    data: [],
                    textStyle: {
                        color: 'rgba(52, 73, 129, 1)'
                    },
                    type: "scroll",
                    icon: "rect",
                    bottom: "10px"
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    backgroundColor: 'rgba(54, 165, 254, 0.9)',
                    // confine: true,
                    position: function (point, params, dom, rect, size) {
                        // 固定在顶部
                        return [point[0], '10%'];
                    }
                },
                grid: {
                    top: '2%',
                    left: '2%',
                    right: '2%',
                    bottom: '20px',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: [1, 2, 45, 4, 3, 4, 6],
                    axisTick: {
                        show: false //隐藏X轴刻度
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#172C45"
                        }
                    },
                    axisLabel: {
                        show: true,
                        // rotate: 30,

                        textStyle: {
                            color: '#6F7D8C',
                            fontSize: 14,

                        }
                    },
                }],
                yAxis: [{

                    type: 'value',
                    name: "",

                    nameTextStyle: {
                        color: '#6F7D8C',
                        fontSize: 11,

                        left: -5,
                        textStyle: {
                            padding: [0, 50, 0, 0],
                        },
                        verticalAlign: "center",
                    },
                    axisLabel: {
                        color: '#6F7D8C',
                        textStyle: {
                            fontSize: 14
                        },

                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#000000',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#172C45',
                            type: "dashed",
                        }
                    },

                    axisLabel: {
                        formatter: (value) => {
                            if (value.length > 10) {
                                return value.substring(0, 10) + "...";
                            } else {
                                return value;
                            }
                        }
                    },

                    minInterval: 1

                }],
                series: [
                    {
                        barMaxWidth: 20,
                        // lineStyle: {
                        //     normal: {
                        //         width: 3
                        //     }
                        // },
                        itemStyle: {
                            borderColor: '#1A71FD',
                            borderWidth: 0,
                            color: '#1A71FD',
                            normal: {
                                borderWidth: 0
                            }
                        },
                        renderItem: (params, api) => {
                            const location = api.coord([api.value(0), api.value(1)]);
                            const xlocation = api.coord([api.value(0), 0]);
                            return {
                                type: 'InclinedRoofBar',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0] + 10,
                                    y: location[1],
                                    xAxisPoint: [xlocation[0] + 10, xlocation[1]]
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#1A71FD' },
                                        { offset: 1, color: 'rgba(26,113,253,0.1)' }
                                    ]),
                                    // stroke: '#1A71FD'
                                }
                            };
                        },
                    }
                ]
            },

        }
    },
    props: {
        y: {
            type: Boolean,
            default: false,
        },
    },
    mounted() {
        this.init();
        this.$nextTick(() => {
            $(this.$refs['echarts']).resize(() => {
                this.resizeChart()
            })
        })
    },
    methods: {
        init() {
            if (this.data.length > 0) {
                this.flag = true;
                let _option = _.merge(this.options, this.option);
                this.$nextTick(() => {
                    let labels = [],
                        legend = [],
                        series = [];
                    this.data[0].data.map((item) => {
                        labels.push(item.label);
                    })
                    this.data.map((item, index) => {
                        series.push(_.merge(Object.assign({
                            type: 'line'
                        }, _option.series[index], item)));
                        legend.push(item.name ? item.name : '');
                    })
                    _option.series = series;
                    if (this.y) {
                        _option.yAxis[0].data = labels;
                        _option.xAxis[0].type = "value";
                        _option.yAxis[0].type = "category";
                    } else {
                        _option.xAxis[0].data = labels;
                    }
                    _option.legend.data = legend;

                    this.optionsEnd = _.cloneDeep(_option);
                    // console.log(this.roll&&this.rollshow<(_.get(_option.series,'0.data')||[]).length,'ddd')
                    if (this.roll && this.rollshow < (_.get(_option.series, '0.data') || [])
                        .length) { //只有设置了滚动 且数据的大小大于最小滚动值
                        this.dataEnd = _.cloneDeep(_option.series);
                        _option.series.map((item) => {
                            item.data = item.data.slice(0, this.rollshow);
                        })
                        this.index = this.rollshow;
                        this.y ? _option.yAxis[0].data = _option.yAxis[0].data.slice(0, this.rollshow) :
                            _option.xAxis[0].data = _option.xAxis[0].data.slice(0, this.rollshow);
                    }
                    this.optionCureen = _.cloneDeep(_option);
                    this.initChart('echarts', this.optionCureen);
                    this.start();
                })
            } else {
                this.clearChart();
                this.flag = false;
            }
        },
        setTime() {
            this.stop();
            let _index
            this.setTimeFlag = setInterval(() => {
                _index = this.index % this.optionsEnd.series[0].data.length;
                for (let i = 0; i < this.optionCureen.series.length; i++) {
                    this.optionCureen.series[i].data.shift();
                    this.optionCureen.series[i].data.push(this.optionsEnd.series[i].data[_index]);
                    // console.log(this.index%this.optionsEnd.series[0].data.length,'eeee===')
                }
                if (this.y) {
                    this.optionCureen.yAxis[0].data.shift();
                    this.optionCureen.yAxis[0].data.push(this.optionsEnd.yAxis[0].data[_index]);
                } else {
                    this.optionCureen.xAxis[0].data.shift();
                    this.optionCureen.xAxis[0].data.push(this.optionsEnd.xAxis[0].data[_index]);
                }
                this.index++;
                this.myChart.setOption(this.optionCureen, {
                    replaceMerge: ['xAxis', 'yAxis', 'series']
                });
            }, this.rollTime);
        }
    }
}
</script>
<style lang="less" scoped></style>
